<template>
  <div class="lx_mine">
    <!-- 渲染头像 -->
    <div class="lx_head">
      <img
        src="https://img.axureshop.com/c2/e9/7b/c2e97b96ebac43fdaa2b01538e82639f/images/%E6%88%91%E7%9A%84/u819.png" />
    </div>
    <!-- 渲染用户信息 -->
    <div class="lx_handload" v-for="item in list" :key="item._id">
      <!-- 头像 -->
      <div class="lx_head_img">
        <img :src="item.landlord" alt="" />
      </div>
      <p style="text-align: center; margin-top: 40px; color: #fff">{{ item.admin }}</p>
    </div>

    <!-- 我的订单 -->
    <div class="order_title">我的订单</div>
    <!-- 功能按钮 -->
    <div class="order_list">
      <!-- 已确认 -->
      <div class="order_list1" @click="goOrder">
        <div style="margin-left: 18px; margin-top: 10px"><van-icon name="passed" size="30" /></div>
        <p style="text-align: center">已确认</p>
      </div>
      <!-- 待支付 -->
      <div class="order_list1" @click="goOrder">
        <div style="margin-left: 18px; margin-top: 10px">
          <van-icon name="balance-pay" size="30" />
        </div>
        <p style="text-align: center">待支付</p>
      </div>
      <!-- 退款中 -->
      <div class="order_list1" @click="goOrder">
        <div style="margin-left: 18px; margin-top: 10px">
          <van-icon name="refund-o" size="30" />
        </div>
        <p style="text-align: center">退款中</p>
      </div>
      <!-- 全部订单 -->
      <div class="order_list1" @click="goOrder">
        <div style="margin-left: 18px; margin-top: 10px"><van-icon name="qr" size="30" /></div>
        <p style="text-align: center">全部订单</p>
      </div>
    </div>

    <!-- 个人资料 -->
    <div class="lx_personal" @click="goPersonal">
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="todo-list-o" size="25" color="#4a72fe" /></span>
      </div>
      <div class="lx_personal1">个人资料</div>
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="arrow" color="#d6d6d6" /></span>
      </div>
    </div>

    <!-- 修改密码 -->
    <div class="lx_personal" @click="goChangePwd">
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="more-o" size="25" color="#4a72fe" /></span>
      </div>
      <div class="lx_personal1">修改密码</div>
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="arrow" color="#d6d6d6" /></span>
      </div>
    </div>

    <!-- 我的房源信息 -->
    <div class="lx_personal" @click="goRental">
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="shop-o" size="25" color="#4a72fe" /></span>
      </div>
      <div class="lx_personal1">我的房源信息</div>
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="arrow" color="#d6d6d6" /></span>
      </div>
    </div>

    <!-- 成为房东 -->
    <div class="lx_personal" @click="router.push('/addhome')">
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="wap-home-o" size="25" color="#4a72fe" /></span>
      </div>
      <div class="lx_personal1">成为房东</div>
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="arrow" color="#d6d6d6" /></span>
      </div>
    </div>

    <!-- 消息中心
    <div class="lx_personal">
      <div class="lx_personals">
        <span style="margin-left: 30px"
          ><van-icon name="bullhorn-o" size="25" color="#4a72fe"
        /></span>
      </div>
      <div class="lx_personal1">消息中心</div>
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="arrow" color="#d6d6d6" /></span>
      </div>
    </div> -->

    <!-- 意见反馈
    <div class="lx_personal">
      <div class="lx_personals">
        <span style="margin-left: 30px"
          ><van-icon name="question-o" size="25" color="#4a72fe"
        /></span>
      </div>
      <div class="lx_personal1">意见反馈</div>
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="arrow" color="#d6d6d6" /></span>
      </div>
    </div> -->

    <!-- 关于 -->
    <div class="lx_personal" @click="goAbout">
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="smile-comment-o" size="25" color="#4a72fe" /></span>
      </div>
      <div class="lx_personal1">关于</div>
      <div class="lx_personals">
        <span style="margin-left: 30px"><van-icon name="arrow" color="#d6d6d6" /></span>
      </div>
    </div>

    <!-- 退出登录 -->
    <div class="out_login" @click="logout">退出登录</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import router from '@/router'

// 跳转关于页面
const goAbout = () => {
  router.push('/about')
}

// 跳转我的房源信息
const goRental = () => {
  router.push('/rental')
}

// 跳转修改密码
const goChangePwd = () => {
  router.push('/changepwd')
}

// 跳转个人资料
const goPersonal = () => {
  router.push('/personal')
}

// 跳转我的订单
const goOrder = () => {
  router.push('/myorder')
}

// 退出登录
const logout = () => {
  localStorage.removeItem('user')
  router.push('/login')
}

// 渲染
import axios from 'axios'
const list = ref([])
let user = JSON.parse(localStorage.getItem('user') || '{}')
let id = user._id
let getList = async () => {
  let {
    data: { data }
  } = await axios.get('http://localhost:3000/lx/user')
  list.value = data.filter((item: any) => item._id == id)
}

onMounted(() => {
  getList()
})
</script>

<style>
* {
  padding: 0;
  margin: 0;
}

.lx_mine {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.lx_head {
  width: 100vw;
  height: 214px;
}

.lx_head img {
  width: 100%;
}

.order_title {
  width: 100vw;
  height: 40px;
  margin-top: 40px;
  margin-left: 20px;
  font-weight: bold;
  font-size: 20px;
}

.order_list {
  width: 100vw;
  height: 80px;
  margin-top: 10px;
  box-shadow: 4px 4px 10px 0 rgba(210, 210, 210, 0.5);
  display: flex;
  justify-content: space-around;
}

.order_list1 {
  width: 70px;
  height: 70px;
  margin-top: 5px;
}

.lx_personal {
  width: 100vw;
  height: 50px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #cccc;
  margin-top: 10px;
}

.lx_personals {
  width: 60px;
  height: 50px;
  margin-top: 5px;
  line-height: 50px;
  font-size: 20px;
}

.lx_personal1 {
  width: 220px;
  height: 50px;
  margin-top: 5px;
  line-height: 50px;
  font-size: 17px;
}

.out_login {
  width: 300px;
  height: 50px;
  margin: 0 auto;
  margin-top: 40px;
  text-align: center;
  line-height: 50px;
  border: 1px solid #4a73fe;
  color: #4a73fe;
}

.lx_handload {
  width: 300px;
  height: 150px;
  position: absolute;
  top: 40px;
  left: 50px;
}

.lx_head_img {
  width: 80px;
  height: 80px;
  margin-left: 110px;
  border-radius: 50%;
}

.lx_head_img img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-left: calc(50% - 50px);
}
</style>